<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

    <title>基本信息修改</title>

    <link rel="stylesheet" href="/static/css-lib/bootstrap.min.css" />

    <style>
        .user-avatar {
            width: 200px;
        }

        .img-box {
            margin-top: 0;
        }

        @media (max-width: 960px) {
            .user-avatar {
                width: 200px;
            }

            .img-box{
                margin-top: 30px;
            }
        }

        .re-select-btn {
            margin-top: 10px;
        }

        .panel-height {
            height: 275px;
        }

        /**
         * Zoomify插件样式，无需修改
         */
        .zoomify {
            cursor: pointer;
            cursor: -webkit-zoom-in;
            cursor: zoom-in;
        }

        .zoomify.zoomed {
            cursor: -webkit-zoom-out;
            cursor: zoom-out;
            padding: 0;
            margin: 0;
            border: none;
            border-radius: 0;
            box-shadow: none;
            position: relative;
            z-index: 1501;
        }

        .zoomify-shadow {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            display: block;
            z-index: 1500;
            background: rgba(0, 0, 0, .3);
            opacity: 0;
        }

        .zoomify-shadow.zoomed {
            opacity: 1;
            cursor: pointer;
            cursor: -webkit-zoom-out;
            cursor: zoom-out;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <ul id="myTab" class="nav nav-tabs">
            <li class="active">
                <a href="#userName" data-toggle="tab">
                    姓名
                </a>
            </li>
            <li>
                <a href="#userAvatar" data-toggle="tab">头像</a>
            </li>
        </ul>


        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade in active" id="userName">
                <br/>
                <form role="form">
                    <div class="input-group">
                        <span class="input-group-addon">原姓名</span>
                        <input type="text" class="form-control" value="<c:out value="${AdminInfo.realName}" />" disabled>
                    </div>
                    <br>
                    <div class="input-group">
                        <span class="input-group-addon">修改为</span>
                        <input id="uName" type="text" class="form-control">
                    </div>
                </form>
                <br/>
                <button id="changeName" type="button" class="btn btn-default btn-margin">修改</button>
            </div>
            <div class="tab-pane fade" id="userAvatar">
                <br/>
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                        <div class="panel panel-default panel-height">
                            <div class="panel-heading">原头像</div>
                            <div class="panel-body">
                                <c:choose>
                                    <c:when test="${empty AdminInfo.avatar}">
                                        <img src="/static/images/user-default-avatar.png" alt="用户头像" class="user-avatar" />
                                    </c:when>
                                    <c:otherwise>
                                        <c:set var="adminAvatar" value="/utils/imgDisplay?img=${AdminInfo.avatar}" scope="page" />
                                        <img src="<c:out value="${adminAvatar}"/>" alt="用户头像" class="user-avatar" />
                                    </c:otherwise>
                                </c:choose>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 img-box">
                        <div class="panel panel-default panel-height">
                            <div class="panel-heading">新头像</div>
                            <div class="panel-body">
                                <div id="imgBox">
                                    <a href="#">
                                        <img id="selectImg" src="/static/images/add-image(200×200).png" alt="添加图片" class="user-avatar" />
                                    </a>
                                </div>
                            </div>
                            <div id="progressBox" class="panel-footer hidden">
                                <span>上传进度</span>&nbsp;&nbsp;<span id="progress-text"></span>
                                <div class="progress progress-striped active">
                                    <div id="progress-img" class="progress-bar progress-bar-success"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <br/>
                <button id="changePic" type="button" class="btn btn-default btn-margin">确认修改</button>
            </div>
        </div>

        <!-- 错误提示框 -->
        <div id="error-box" class="modal fade" tabindex="-1" role="dialog" data-backdrop="false">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">错误</h4>
                    </div>
                    <div id="error-content" class="modal-body"></div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script src="/static/js-lib/jquery-3.4.1.min.js"></script>
    <script src="/static/js-cus/admin/Frame-UpdateBaseInfo.js"></script>
</body>
</html>